<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书馆后台系统</title>
    <style>
        .grid {
            margin: auto;
            width: 500px;
            text-align: center;
        }
        
        .grid table {
            width: 100%;
        }
        
        .grid th,
        td {
            padding: 10;
            border: 1px solid orangered;
        }
        
        .grid th {
            background: orangered;
        }
        
        .user {
            width: 500px;
            height: 25px;
            background: orangered;
        }
        
        .total {
            height: 25px;
            width: 500px;
        }
        
        .total span {
            float: right;
        }
    </style>
</head>

<body>
    <div id="app">

        <div class="grid">
            <h1>户籍信息登记</h1>
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-bind:key='item.id' v-for="(item,index) in people">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.born}}</td>
                        <td>
                            <a href="#" @click.prevent="handle3(item.id)">删除</a>
                            <strong>|</strong>
                            <a href="#" @click.prevent="handle2(item.id)">更新</a>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="total">
                <span>{{total}}</span>
                <span>总数:</span>
            </div>
            <div>

                <div class="user">
                    <div>
                        <label for="id">编号:</label>
                        <input type="text" id="id" v-model="id" :disabled="flag" v-focus>
                        <label for="name">姓名:</label>
                        <input type="text" id="name" v-model="name" @keyup.enter="handle1">
                        <button @click="handle1" :disabled="flag1">提交</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../js/vue.min.js"></script>
    <!-- 引入axios -->
    <script src="../js/axios.js"></script>
    <script>
        // 设置基础的url
        axios.defaults.baseURL = 'http://localhost:3000/';
        // 设置拦截器
        axios.interceptors.response.use(function(res) {
            return res.data
        }, function(err) {
            console.log(err);
        });


        Vue.directive('focus', {
            inserted: function(el) {
                el.focus();
            }
        })
        let vm = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                flag: true,
                flag1: false,
                people: [{
                    id: 1,
                    name: '邵鹏松',
                    born: '1997-10-11'
                }, {
                    id: 2,
                    name: '刘备',
                    born: '1997-10-11'
                }, {
                    id: 3,
                    name: '曹操',
                    born: '1997-10-11'
                }]
            },
            methods: {
                handle1: async function() {
                    if (this.flag == false) {
                        // 添加逻辑重构
                        var ret = await axios.post('books', {
                            name: this.name
                        })
                        if (ret.status == 200) {
                            this.queryData;
                        }
                    } else {
                        var ret = await axios.put('books/' + this.id, {
                            name = this.name
                        })
                        if (ret.status === 200) {
                            this.queryData()
                        }
                        this.flag = false;
                    }
                    this.id = '';
                    this.name = ''

                },
                handle2: async function(id) {
                    this.flag = true;
                    var ret = await axios.get('books' + id);
                    this.id = ret.id;
                    this.name = ret.name;
                },
                handle3: async function(id) {
                    let ret = await axios.delete('books/' + id);
                    if (ret.status == 200) {
                        this.queryData()
                    }

                },
                // 利用async/await调用图书数据，发送get请求
                queryData: async function() {
                    this.books = await axios.get('books');
                }
            },
            computed: {
                total: function() {
                    return this.people.length;
                }
            },
            watch: {
                name: function(val) {
                    var ret = await axios.get('/books/book' + this.name);
                    if (ret.status == 1) {
                        this.flag1 = true;
                    } else {
                        this.flag1 = false;
                    }
                }

            },
            mounted: function() {
                // 利用axios调用后台数据
                // let that=this;
                // axios.get('book').then(function(data){
                //     that.books=data.data;
                // })
                this.queryData();
            }

        })
    </script>
</body>

</html>